<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Chromosome ${Chromosome}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
		<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}" />
		<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}" />
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'chromosome.css')}" type="text/css" />
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css" />
                <link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery.dataTables.css')}" type="text/css">
        <g:javascript library="jquery" />

        <r:layoutResources />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <g:javascript src="jquery.dataTables.min.js" />
        <g:javascript src="ColReorder.min.js" />
        <g:javascript src="ColVis.min.js" />
        <g:javascript src="chromosome.js" />
  </head>
  <body>
    <g:render template="/main/header" />
    <h1>Chromosome Mapping of ${Organism.name} (${Organism.fullName})</h1>
    <div class="container">
      <div class="tabs">
          <div class="tab firstTab lastTab" id="h-chromosome" style="border-bottom:1px solid white;">Chromosome ${Chromosome}</div>
      </div>
      <div class="content">
          <div class="tab-content" id="chromosome${Chromosome}">
            <div class="singleChromDescription">
              <div class="legend">
                  <div class="chromLegend">
                    <div class="foundAll">${Genes.identified} of ${Genes.all} gene<g:if test="${Genes.all!=1}">s</g:if> identified (${((Genes.identified*100)/Genes.all).toInteger()}%)</div>
                    <div class="foundProjects">
                      <g:each in="${Projects}" var="proj">
                        <g:set var="numberOfGenes" value="${(Genes.projects[proj.id]!=null)?Genes.projects[proj.id]:0}" />
                        <div class="foundProj">
                          <div class="bar" style="width:${((numberOfGenes*100)/Genes.all).toInteger()}%"></div>
                          <div class="label">
                             <div class="name">${proj.name}</div>
                             <div class="number">${numberOfGenes} genes identified</div>
                             <div class="percent">(${((numberOfGenes*100)/Genes.all).toInteger()}%)</div>
                           </div>
                        </div>
                      </g:each>
                    </div>
                  </div>
                  <div class="project">
                    <div class="color" style="background: #888;border: 1px solid #444;"></div>
                    <div class="projectName">Number of all genes</div>
                  </div>
                  <div class="project">
                    <div class="color" style="background-color: #2B95FF;border: 1px solid #444;"></div>
                    <div class="projectName">Number of identified genes</div>
                  </div>
              </div>
               <div class="text">
                 The grey bar indicates the number of genes which are located in this region, whereas the blue bar indicates the number of identified genes.
                 To retrieve detailed information mouse over one region in order to get an experiment-wise listing of the ratio of identified genes or select a region to get a list of identified proteins and corresponding experiments.
               </div>
             </div>
            <div class="chrom-mapping">
              <img src="../../images/chromosomes/${Organism.name}/big/${Chromosome}.jpg" alt="Chromosome ${Chromosome}" style="height:${(Ranges.size()*6)+20}px;"/>
              <div class="bars" style="height:${(Ranges.size()*6)+40}px;">
                <div class="marker"><div class="markerLeft"></div></div>
                <g:set var="barNr" value="${0}" />
                <g:set var="Max" value="${((Max/10).toInteger()+1)*10}" />
                <g:each in="${Ranges.keySet()}" var="range">
                  <g:remoteLink style="top:${barNr*6}px;" action="proteinList" update="proteinTable" params="${[start:range, end:(range+RangeWidth-1), chromosome:Chromosome, organism:Organism.id, max:ChromosomeEnd, ranges:Ranges.size()]}">
                    <div class="bar" style="width:<g:if test="${Ranges[range].all.size()!=0}">${((Ranges[range].all.size()*100)/(Max)).toInteger()}%</g:if><g:else>0px</g:else>;">
                      <div class="found" style="width:<g:if test="${Ranges[range].all.size()!=0}">${((Ranges[range].identified.size()*100)/Ranges[range].all.size()).toInteger()}</g:if><g:else>0</g:else>%;"></div>
                    </div>
                    <div class="info">
                      <div class="range">${range} - <g:if test="${(range+RangeWidth-1)>ChromosomeEnd}">${ChromosomeEnd}</g:if><g:else>${range+RangeWidth-1}</g:else><span>${Ranges[range].identified.size()} of ${Ranges[range].all.size()} gene<g:if test="${Ranges[range].all.size()!=1}">s</g:if> identified (${(Ranges[range].all.size()!=0)?((Ranges[range].identified.size()*100)/(Ranges[range].all.size())).toInteger():0}%)</span></div>
                      <div class="projects">
                        <g:each in="${Projects}" var="proj">
                          <div class="project"><div class="projectBar" style="width:${(Ranges[range].all.size()!=0)?((Ranges[range].projects[proj.id.toInteger()].size()*100)/Ranges[range].all.size()):0}%;"></div><div class="txt">${proj.name} <span>${Ranges[range].projects[proj.id.toInteger()].size()} gene<g:if test="${Ranges[range].projects[proj.id.toInteger()].size()!=1}">s</g:if> identified (${(Ranges[range].all.size()!=0)?((Ranges[range].projects[proj.id.toInteger()].size()*100)/Ranges[range].all.size()).toInteger():0}%)</span></div></div>
                        </g:each>
                      </div>
                    </div>
                  </g:remoteLink>
                  <g:set var="barNr" value="${barNr+1}" />
                </g:each>
                <div class="reference" >
                  <g:each in="${0..Max}" var="i">
                    <g:if test="${i%5==0}">
                      <div class="sep<g:if test="${(i%10==0)||(i==Max)}"> labeled</g:if>" style="left:${((i*100)/Max).toInteger()}%"><g:if test="${(i%10==0)||(Max==i)}"><div class="reflabel">${i}</div></g:if></div>
                    </g:if>
                  </g:each>
                </div>
              </div>
              <g:if test="${(Marked!=null)}">
                <script type="text/javascript">setMarker(${Marked['Start']},${Marked['End']},${ChromosomeEnd},${Ranges.size()},"${Marked['Label']}");</script>
              </g:if>
              <script type="text/javascript">
                $(document).ready(function () {
                  $('.singleChromDescription .text').width($('.content').width()-430);
                  $(window).resize(function(){
                    $('.singleChromDescription .text').width($('.content').width()-430);
                  });
                  $('.chrom-mapping .bars a').click(function(){
                      showProteinTable();
                  });
                });
              </script>
            </div>
            <div id="proteinTable"></div>
          </div>
      </div>
    </div>
  </body>
</html>